<template>
  <div class="animated fadeIn">
    <!-- 空车入线 2018/3/5 11:13  -->
    <Row>
      <i-col :md="24">
        <div>
          <div style="position:relative;">
            <Table :columns="columns7" :data="main_order_list" ref="table"></Table>
            <div style="position:absolute;top:0px;width:100%;height:100%;display: flex;
                                      align-items: center;
                                      justify-content: center;background: rgba(210, 216, 222, 0.5);"
                 v-if="list_loadding">
              <Spin size="large"></Spin>
              <h6 style="color:#2d8cf0;margin-top:10px;">正在获取数据...</h6>
            </div>
          </div>

          <Page :total="this.pageTotal" show-total @on-change="setInitPage"
                style="text-align:right;margin-top:50px"></Page>
          <!--
                  <Button type="primary" size="large" @click="exportData(1)">
                    <Icon type="ios-download-outline"></Icon>
                    导出原始数据
                  </Button>
                  <Button type="primary" size="large" @click="exportData(2)">
                    <Icon type="ios-download-outline"></Icon>
                    导出排序和过滤后的数据
                  </Button>
                -->
        </div>
      </i-col>
      <i-col :md="12">
      </i-col>
    </Row>
    <Modal v-model="detailModel" title="运单详情" width="600">
      <Table :columns="column1" :data="detailData"></Table>
    </Modal>
  </div>
</template>
<script>
  import { getMainOrder, getOrderDetail } from '@api/backEnd/mainOrder'

  export default {
    name: 'emptyTrain',
    data () {
      return {
        detailModel: false,
        progresshow: false,
        progresscount: 0,
        progresstatus: 'active',
        progressspeed: 0,
        video_list: [],
        pageindex: 1,
        pageTotal: null,
        main_order_list: [],
        detailData: [],
        lodding: false,
        list_loadding: false,
        columns7: [
          {
            title: '联运单号',
            key: 'orderNo',
            ellipsis: 'false',
            render: (h, params) => {
              let thisdata = params.row.orderNo
              return h('Poptip', {
                props: {
                  content: thisdata,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, thisdata)
            }
          },
          {
            title: '空车入线时间',
            ellipsis: 'false',
            key: 'emptyTime',
            render: (h, params) => {
              let thisdata = params.row.emptyTime
              return h('Poptip', {
                props: {
                  content: thisdata,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, thisdata)
            }
          }, {
            title: '起始站',
            ellipsis: 'false',
            key: 'endStationName',
            render: (h, params) => {
              let thisdata = params.row.endStationName
              return h('Poptip', {
                props: {
                  content: thisdata,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, thisdata)
            }
          }, {
            title: '创建时间',
            key: 'createTime',
            sortable: true,
            sortType: 'desc',
            render: (h, params) => {
              let thisdata = params.row.createTime
              return h('Poptip', {
                props: {
                  content: thisdata,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, thisdata)
            }
          }, {
            title: '操作',
            key: 'action',
            align: 'center',
            ellipsis: 'true',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  on: {
                    click: (value, row) => {
                      this.detailModel = true
                      getOrderDetail(params.row).then(res => {
                        if (res.data.isSuccess === 1) {
                          this.detailData = res.data.data.list.sub
                        }
                      })
                    }
                  }
                }, '查看详情')
              ])
            }
          }
        ], // cloumn
        column1: [
          {
            title: '联运单号',
            ellipsis: 'false',
            key: 'mainOrderNo',
            render: (h, params) => {
              let thisdata = params.row.mainOrderNo
              return h('Poptip', {
                props: {
                  content: thisdata,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, thisdata)
            }
          },
          {
            title: '子单号',
            key: 'orderNo',
            render: (h, params) => {
              let thisdata = params.row.orderNo
              return h('Poptip', {
                props: {
                  content: thisdata,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, thisdata)
            }
          },
          {
            title: '车号',
            key: 'trainNumber',
            render: (h, params) => {
              let thisdata = params.row.trainNumber
              return h('Poptip', {
                props: {
                  content: thisdata,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, thisdata)
            }
          }
        ]
      }
    },
    computed: {},
    methods: {
      remove (index) {
        this.video_list.splice(index, 1)
      },
      //      qiniu_upload () {
      //        uploader.start()
      //      },
      setInitPage (page) {
        const status = 1
        const param = { status, page }
        getMainOrder(param).then(res => {
          if (res.data.isSuccess === 1) {
            let mainOrderList = res.data.data.list
            mainOrderList.sort(function (p1, p2) {
              return new Date(p1.createTime).getTime() - new Date(p2.createTime).getTime()
            })
            this.main_order_list = mainOrderList.reverse()
            this.pageTotal = res.data.data.total
          } else {
            this.pageTotal = 0
          }
        })
        this.pageindex = page
      },
      exportData (type) {
        if (type === 1) {
          this.$refs.table.exportCsv({
            filename: '原始数据',
            columns: this.columns7,
            data: this.video_list
          })
        } else if (type === 2) {
          this.$refs.table.exportCsv({
            filename: '排序和过滤后的数据',
            original: false
          })
        }
      }
    },
    mounted () {
      const vue = this
      this.list_loadding = true
      setTimeout(function () {
        vue.list_loadding = false
      }, 2000)
      this.setInitPage(1)
    },
    components: {}
  }
</script>
<style scoped>

</style>
